<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="productName" label="产品名称" width="100" />
        <el-table-column prop="brand" label="品牌" width="100" />
        <el-table-column prop="materialName" label="材料名称" width="100" />
        <el-table-column prop="packingSpecifications" label="包装规格" width="100" />
        <el-table-column label="包装日期" width="120">
            <template #default="scope">
                {{ formatDate(scope.row.packingDate) }}
            </template>
        </el-table-column>
        <el-table-column prop="packingPlan" label="包装计划" width="100" />
        <el-table-column prop="packers" label="包装人员" width="100" />
        <el-table-column prop="qualityInspectors" label="质检人员" width="100" />
        <el-table-column label="设备名称" width="100">
            <template #default="scope">
                {{ getDeviceName(scope.row.id) }}
            </template>
        </el-table-column>
        <el-table-column prop="testResults" label="外观检验结果" width="110" />
        <el-table-column prop="inkjetEffect" label="喷码/压码效果" width="115" />
        <el-table-column prop="tightness" label="密封性" width="100" />
        <el-table-column prop="compliance" label="操作合规性" width="100" />
        <el-table-column prop="abnormal" label="异常原因分析结果" width="140" />
        <el-table-column prop="reviewers" label="审核人" width="100" />
        <el-table-column label="审核日期" width="120">
            <template #default="scope">
                {{ formatDate(scope.row.auditDate) }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
            <template #default="scope">
                <el-button link type="danger" :icon="Delete" size="small"
                    @click="Del(scope.row.monitorId)">删除</el-button>
                <el-button link type="warning" :icon="Edit" size="small"
                    @click="Upd(scope.row.monitorId)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[15, 20, 25, 30]" layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const tableData = ref([]);

const form = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    totalPage: 0,
})

// 模拟设备 ID 与设备中文名称的映射表
const deviceNameMap = {
    1: '扎啤机',
    2: '鲜啤机',
    3: '苦啤机',
    4: '普啤机',
    5: '黑啤机',
    6: '奶啤机',
    // 可以根据实际情况添加更多映射
}

const handleSizeChange = (val: number) => {
    Show();
}
const handleCurrentChange = (val: number) => {
    Show();
}

onMounted(() => {
    Show();
})

const Show = () => {
    read.get("p2-read/api/Monitor/QueryMonitor", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize
        }
    })
      .then(res => {
            form.totalCount = res.data.totalCount;
            form.totalPage = res.data.totalPage;
            // 处理数据，将设备 ID 转换为设备中文名称
            const newData = res.data.data.map(item => {
                return {
                   ...item,
                    deviceName: getDeviceName(item.id)
                }
            })
            tableData.value = newData;
        })
}

const Del = (monitorId: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
      .then(() => {
            write.post("p2-write/api/Monitor/DelMonitor", {
                monitorId: monitorId
            })
              .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg);
                        Show();
                    }
                    else {
                        ElMessage.error(res.data.msg);
                        return;
                    }
                })
        })
}

const Upd = (monitorId: any) => {
    router.push({
        path: '/UpdMonitor',
        query: {
            monitorId: monitorId
        }
    })
}

const formatDate = (date: string | number | Date) => {
    return moment(date).format('YYYY-MM-DD');
}

const getDeviceName = (deviceId: number) => {
    return deviceNameMap[deviceId] || '未知设备';
}
</script>    